<template>
	<view class="page-diy">
		<view>
			<view class="module-canvans" v-if="defaultWidth">
				<view
					:class="(showImg || showImgHandle || showAddWord || showTips || showAllPic || form.local==1)?'canvanHide':''">
					<canvas-drag
						:class="(showImg || showImgHandle || showAddWord || showTips || showAllPic || form.local==1)?'canvanHide':''"
						ref="canvasRef" id="canvas-drag" :graph="graph" :width="375" :height="300" enableUndo="true"
						@getIndex="getIndex"></canvas-drag>
				</view>

				<view
					:class="(showImg || showImgHandle || showAddWord || showTips || showAllPic || form.local==0)?'canvanHide':''">

					<canvas-drag-back
						:class="(showImg || showImgHandle || showAddWord || showTips || showAllPic || form.local==0)?'canvanHide':''"
						ref="canvasRefBack" id="canvas-drag-back" :graph="graphBack" :width="375" :height="300"
						enableUndo="true" @getIndex="getIndex"></canvas-drag-back>
				</view>
			</view>

			<view class="u-flex bm p15">
				<view @click="curCeng = -1,popupList=localList,curFiled='local',showPopup=true" class="fz12 mr20">
					位置：{{localList[form.local]}}<u-icon class="ml6 fz10 c9" name="arrow-down-fill"></u-icon></view>
				<view @click="popupList=fuList,curFiled='fu',showPopup=true" class="fz12 mr20">
					辅助线：{{fuList[form.fu]}}<u-icon class="ml6 fz10 c9" name="arrow-down-fill"></u-icon></view>
				<view @click="popupList=diyTypeList,curFiled='diyType',showPopup=true" class="fz12">
					DIY类型：{{diyTypeList[form.diyType]}}<u-icon class="ml6 fz10 c9" name="arrow-down-fill"></u-icon>
				</view>
			</view>
			<view class="module-action mt20 pl10 pr10" v-if="diyTypeList[form.diyType]=='平面打印'">

				<view class="u-flex u-f-justify">
					<view class="action-item" @click="onAddImage">
						<image src="../../static/image/ic-pic.png"
							style="width:48rpx;height:48rpx;display: block;margin: 0 auto 20rpx;"></image>
						添加图片
					</view>
					<view class="action-item" @click="curFont=-1,showAddWord=true">
						<image src="../../static/image/ic-word.png"
							style="width:48rpx;height:48rpx;display: block;margin: 0 auto 20rpx;"></image>
						添加文字
					</view>
					<view class="action-item" @click="showAllPic=true">
						<image src="../../static/image/ic-tu.png"
							style="width:48rpx;height:48rpx;display: block;margin: 0 auto 20rpx;"></image>
						图库
					</view>
				</view>
			</view>
			<view scroll-y="true" class="specs p15" style="width: auto;" v-if="diyTypeList[form.diyType]=='立体文字'">


				<view class="specs mb16" v-for="(item, index) in propertyList" :key="index">
					<view class="specs-hd p-20-0">
						<text class="f12 c6">{{ item.propertyName }}</text>
					</view>
					<view class="u-flex" style="flex-wrap: wrap;" v-if="item.valueList">
						<view :class="['sku-word-item',item.curIndex==index1?'on':'']"
							v-for="(item1,index1) in item.valueList" :key="index1" @click="selectSku(index,index1)">
							<image v-if="item1.valuePicture" :src="item1.valuePicture"
								style="width: 100%;height: 100rpx;display: block;margin: 0 0 10rpx;">
							</image>
							{{ item1.valueName }}
						</view>
					</view>
				</view>
				<view class="specs mb16">
					<view class="specs-hd p-20-0 u-flex u-f-jsb">
						<text class="f12 c6">文字</text>
						<u-icon name="checkmark" class="fz20" @click="onAddText"></u-icon>
					</view>
					<view class="brs5 p15 pl0 mt10" style="background: rgba(25,41,28,0.05); ">
						<input type="text" v-model="addWord" placeholder="请输入logo文字" />
					</view>
				</view>
				<!-- <view class="module-action mt20">
					<view class="action-item" @click="curFont=-1,showAddWord=true">
						<image src="../../static/image/ic-word.png"
							style="width:48rpx;height:48rpx;display: block;margin: 0 auto 20rpx;"></image>
						添加文字
					</view>
				</view> -->


			</view>
			<scroll-view style="height: 500rpx;" :scroll-y="true" v-if="diyTypeList[form.diyType]=='添加挂件'">
				<view class="page-content ">
					<view v-if="themeList.length>0" class="theme-list bt bm pt20 pl15 pr15  bg-white">
						<view class="item" v-for="(item,index) in themeList" @click="themeClick(index)" :key="index"
							:class="curTheme==index?'on':''">
							<view class="item-img w40 h40 brs-50">
								<image :src="item.picUrl" class=" w40 h40 brs-50" mode="aspectFit"></image>
							</view>
							<view class="item-title fz12 mt10">{{item.name}}</view>
						</view>
					</view>
					<view class="">

						<view class="u-flex bg-white" style="flex-wrap: wrap;">
							<view style="" @click="toSelect(item)" style="width: 33.33%;min-width:  33.33%;"
								class="mb10" v-for="(item,index) in dataList" :key="index">

								<view>
									<view class="p10">

										<view class="u-flex u-f-justify" style="background: #f5f5f5;">
											<image :src="item.picUrl" style="height:120rpx;" mode="heightFix"></image>
										</view>
										<view class="u-flex u-f-jsb fz12 mt10" style="color: #19291C;">
											<span class="u-line-1">{{item.name}}</span>
											<span>￥{{item.price}}</span>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class=" mt10">

							<u-loadmore :status="loadStatus" v-if="dataList.length>0" />
						</view>
						<view class="order-none u-flex u-f-justify fz16 c9 p50" v-if="dataList.length<=0">
							暂无数据！
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="fixed-bottom p15">
				<view class="u-flex module-next p15" v-if="curCeng==-1">
					<view class="u-flex u-f-jsb u-f1 pr20">
						<view class="item u-f1" :class="[curAction==0?'on':'']" @click="curAction=0,onClearCanvas()">
							<u-icon name="trash"></u-icon>
							<view class="fz12 fontFirst1">清空画布</view>
						</view>

						<view class="item u-f1" :class="[curAction==2?'on':'']" @click="curAction=2,onExport()">
							<u-icon name="eye"></u-icon>
							<view class="fz12">预览效果</view>
						</view>
					</view>
					<!-- toShow -->
					<view class="btn-sure" @click="onExport(1)">确定</view>
				</view>

				<view class="u-flex u-f-jsb bt pt10 pl20 pr20" style="text-align: center;" v-else>
					<view @click="setWord" v-if="curCengInfo.type=='text'">
						<u-icon name="edit-pen"></u-icon>
						<view>文字颜色</view>
					</view>
					<view @click="setSort(1)">
						<u-icon name="edit-pen"></u-icon>
						<view>上移一层</view>
					</view>
					<view>
						<u-icon name="bookmark"></u-icon>
						<view class="fz12">复制图层</view>
					</view>
					<view @click="setSort(2)">
						<u-icon name="edit-pen"></u-icon>
						<view>下移一层</view>
					</view>
				</view>
			</view>
		</view>


		<u-picker @confirm="popupConfirm" mode="selector" v-model="showPopup" :range="popupList"></u-picker>




		<u-popup v-model="showAddWord" mode="bottom" border-radius="20" :closeable="false">
			<view class="p20">
				<view class="u-flex u-f-jsb fz20">
					<u-icon name="close"></u-icon>
					<u-icon name="checkmark" @click="onAddText"></u-icon>
				</view>

				<view class="mt15" style="min-height: 500rpx;">
					<view class="mb15">
						<u-input :border="true" v-model="addWord" placeholder="请输入" type="text" :clearable="false" />

					</view>

					<u-tabs v-if="showAddWord" :list="tabWord" :is-scroll="false" active-color="#70B52C"
						:current="curTabWord" @change="tabWordChange"></u-tabs>
					<view class="" v-if="curTabWord==0">

						<view class="specs mb16 spec-diy mt15">

							<view class="u-flex pl10 pr10" style="flex-wrap: wrap;">
								<view class="sku-item" v-for="(item,index) in fontAttr"
									:class="[item,curFont==index?'on':'']" :key="index" @click="curFont=index">

									<view class="sku-item-content" style="height: 50px;">
										拉布拉多
									</view>
								</view>


							</view>
						</view>
					</view>
					<view class="" v-if="curTabWord==1">
						<color-select ref="colorSelect" @changeColor="getColor" :initColor="rgb" />

					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showTips" mode="center" border-radius="20" :closeable="false">
			<view class="p20" style="width: 600rpx;">
				<image src="../../static/image/ic-first-tips.png"
					style="display: block;margin: 0 auto;width: 72rpx;height: 72rpx;"></image>
				<view class="fz14 p15">
					{{remarkTips}}

				</view>
				<button class="bon" @click="showTips=false">确认</button>
			</view>
		</u-popup>

		<u-popup duration="0" :mask-close-able="false" v-model="showImg" mode="center" border-radius="20"
			:closeable="false">
			<view class="p20" style="width: 700rpx;background:#f3f4f6">

				<u-swiper :list="[curImg,curImgBack]" height="400">
				</u-swiper>
				<button class="bon" @click="closeImg">关闭</button>
			</view>
		</u-popup>

		<u-popup :mask-close-able="false" v-model="showImgHandle" mode="center" border-radius="20" :closeable="false">
			<view class="p20" style="width: 700rpx;">
				<image style="width: 100%;" class="mb10" :src="curAddImg" mode="widthFix"></image>
				<view class="u-flex">
					<button class="bon mr5" @click="imgHandle(1)">直接添加</button>
					<button class="bon ml5" @click="imgHandle(2)">抠图后添加</button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showAllPic" mode="bottom" border-radius="20" :closeable="false">
			<view>

				<view class="mt10">
					<u-tabs name="label" :list="cateList" active-color="#70B52C" :is-scroll="true" :current="current"
						@change="cateChange"></u-tabs>
					<scroll-view scroll-y="true" class="mt20" style="max-height:800rpx;">


						<view class="specs mb16 spec-diy">

							<view class="u-flex pl10 pr10" style="flex-wrap: wrap;">
								<view class="sku-item" @click="toSelect(item)" v-for="(item,index) in imageList"
									:key="index">

									<view class="sku-item-content">

										<image :src="item.picUrl" style="width:100%;height:106px" mode="widthFix">
										</image>
									</view>
								</view>
							</view>
						</view>


					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import canvasDrag from "@/components/canvas-drag/index";
	import canvasDragBack from "@/components/canvas-drag/index";
	export default {
		components: {
			canvasDrag,
			canvasDragBack
		},
		data() {
			return {
				graph: {},
				graphBack: {},
				curCeng: -1,
				showImg: false,
				defaultWidth: '1',
				defaultLength: '',
				fontAttr: ['fontfirst', 'fontsecond', 'fontthird'],
				curFont: -1,
				curCengInfo: {},
				canvasBg: "",
				cateList: [],
				imageList: [],
				showImgHandle: false,
				showAddWord: false,
				addWord: '拉布拉多',
				curAddImg: '',
				current: 0,
				showAllPic: false,
				showPopup: false,
				popupList: [],
				curTabWord: 0,
				curAction: 0,
				form: {
					local: 0,
					fu: 0,
					diyType: 0,
				},
				page: 1,
				curImg: '',
				curImgBack: '',
				prodInfo: '',
				psdUrl: '',
				psdBackUrl: '',
				rgb: 'rgb(255,0,0)',
				tabWord: [{
					name: '字体'
				}, {
					name: '颜色'
				}, ],
				loadStatus: 'more',
				curSkuId: '',
				remarkTips: '',
				localList: ['正面', '背面'],
				diyTypeList: ['平面打印', '立体文字', '添加挂件'],
				fuList: ['开', '关'],
				curFiled: 'local',
				showTips: false,
				diyInfo: {},
				tabList: [],
				dataList: [],
				curTheme: 0,
				themeList: [],
				info: {},
				propertyList: [],
			}
		},
		onLoad(e) {
			this.showTips = true
			this.$api.dictList({
				dictType: 'diy_word'
			}, res => {
				if (res.code == 200) {
					this.remarkTips = res.data[0].remark
				}
			})
			this.$api.dictList({
				dictType: 'system_source_material_type'
			}, res => {
				if (res.code == 200) {
					this.cateList = res.data
					this.getData()
				}
			})

			if (e.prodId) {
				this.curSkuId = e.id
				this.getProd(e.prodId)
			}
			if (e.diyId) {

				this.$api.compositionDetail({
					id: e.diyId
				}, res => {
					if (res.code == 200) {
						this.diyInfo = res.data
						this.getProd(res.data.spuId)
						this.curSkuId = res.data.skuId
						if (e.type && e.type == 'userOther') {
							delete this.diyInfo.id
						}
					}
				})
			}

			if (e.communityId) {

				this.$api.compositionInfo({
					id: e.communityId
				}, res => {
					if (res.code == 200) {
						this.diyInfo = res.data
						this.curSkuId = res.data.skuId
						this.getProd(res.data.spuId)
					}
				})
			}


			this.$api.categoryAll({
				parentId: 34,
			}, res => {
				if (res.code == 200) {
					this.tabList = res.data
					this.getSecondList()
				}
			})


			this.$api.productInfo({
				id: 26
			}, res => {
				if (res.code == 200) {
					this.info = res.data
					this.propertyList = []
					this.info.groupList.some(item => {
						if (item.groupName == '材质/颜色') {
							this.otherAttr = item.propertyList
						} else {
							item.propertyList.some(spc => {
								this.$set(spc, 'curIndex', 0)
							})
							this.propertyList = [...this.propertyList, ...item.propertyList]
						}

					})
					this.getSkuValue()
				}
			})
		},
		methods: {
			selectSku(idx, idx1) {
				this.getSkuValue(idx, idx1)
			},

			getSkuValue(idx, idx1) {
				console.log(idx, idx1, 12344)
				let valueIds = []
				this.propertyList.some((item, index) => {
					if (idx == undefined || index != idx) {
						valueIds.push(item.valueList[item.curIndex].valueId)
					} else {
						valueIds.push(item.valueList[idx1].valueId)
					}

				})
				this.$api.productSku({
					spuId: this.info.id,
					valueIds: String(valueIds)
				}, res => {
					if (res.code == 200 && res.data) {
						this.curSku = res.data
						if (idx != undefined) {

							this.propertyList[idx].curIndex = idx1

						}
					} else {

						uni.showToast({
							title: '当前规格不存在',
							icon: 'none'
						});
					}
				})

			},
			themeClick(idx) {
				this.curTheme = idx
				this.initData()
			},
			getSecondList() {
				this.themeList = []
				this.tabList.some((item, index) => {

					this.$api.categoryAll({
						parentId: item.id,
					}, res => {
						if (res.code == 200) {
							this.themeList = [...this.themeList, ...res.data]
							console.log(index, 321213)
							if (index == 0) {
								this.initData()
							}
						}
					})
				})
			},
			initData() {
				this.page = 1
				this.dataList = []
				this.getProdList()

			},
			getProdList() {
				console.log(111111111)
				let post = {
					pageNo: this.page,
					pageSize: 100,
					categoryId: this.themeList[this.curTheme].id
				}
				this.$api.productSearch(post, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.dataList = [...this.dataList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.dataList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
			getPictureInformation(url) {
				if (!url) {
					return true
				}
				return new Promise((resolve, reject) => {


					wx.getImageInfo({
						src: url,
						complete: (res) => {
							resolve(res.path)
						}
					})

				})

			},
			getProd(prodId) {

				this.$api.productInfo({
					id: prodId
				}, res => {
					if (res.code == 200) {
						this.prodInfo = res.data
						this.defaultWidth = res.data.defaultWidth
						this.defaultLength = res.data.defaultLength
						this.getSw(res.data.swUrl)

						if (this.diyInfo.id) {



							this.$nextTick(() => {
								let attr = []
								JSON.parse(this.diyInfo.params).some(item => {
									if (item.type != 'bgImage') {
										attr.push(item)
									}
								})
								const promiseQueue = [];
								attr.forEach(item => {


									let a = this.getPictureInformation(item.url)
									promiseQueue.push(a)
								})



								Promise.all(promiseQueue).then((values) => {
									console.log(values, 12112)
									values.some((item, index) => {
										if (attr[index]) {

											attr[index].url = item
										}
									})

									console.log(attr, 1)
									this.$refs.canvasRef.initByArr(attr);

									this.onChangeBgImage(this.prodInfo.cxPreviewUrl)
									delete this.diyInfo.id
								})
							})
						} else {

							this.onChangeBgImage(res.data.cxPreviewUrl)
						}
					}
				})
			},
			closeImg() {
				this.curImg = ''
				this.curImgBack = ''
				setTimeout(() => {

					this.onChangeBgImage(this.prodInfo.cxPreviewUrl)
					this.showImg = false
				}, 10)
			},
			getSw(url) {


				this.$api.productSku({
					skuId: this.curSkuId,
				}, res => {
					if (res.code == 200 && res.data) {

						let curSku = res.data
						let attr = []
						curSku.properties.some((item) => {
							let i = {
								name: item.propertyName,
								value: item.valueName,
							}
							attr.push(i)
						})


						this.$api.diySwPreview({
							url,
							attrs: JSON.stringify(attr)
						}, res => {
							if (res.code == 200) {
								this.psdUrl = res.data.front_url
								this.psdBackUrl = res.data.back_url

							}
						})
					} else {

						uni.showToast({
							title: '当前规格不存在',
							icon: 'none'
						});
					}
				})
			},
			tabWordChange(e) {
				this.curTabWord = e
			},
			getColor(e) {
				this.fontColor = e
			},
			getIndex(res) {
				console.log(res)
				this.curCeng = res.index
				this.curCengInfo = res.info
			},
			setSort(type) {

				this.$refs.canvasRef.changSort(this.curCeng, type)
			},
			toShow() {

				uni.navigateTo({
					url: '/pages/diy/show'
				})
			},
			cateChange(e) {
				this.current = e
				this.getData()
			},
			getData() {


				this.$api.sourceMaterialList({
					pageNo: 1,
					pageSize: 500,
					type: this.cateList[this.current].value
				}, res => {
					if (res.code == 200) {
						this.imageList = res.data.list
					}
				})

			},

			toSelect(item) {
				wx.getImageInfo({
					src: item.picUrl,
					complete: (res) => {
						this.setData({
							graph: {
								w: 100,
								h: 100,
								sourceId: item.id,
								type: 'image',
								diyType: this.diyTypeList[this.form.diyType],
								url: res.path
							}
						});
						this.showAllPic = false
					}
				})
			},

			popupConfirm(e) {
				console.log(e, 12)
				let ids = e[0]
				this.form[this.curFiled] = ids
			},
			setWord() {
				this.addWord = this.curCengInfo.text
				this.showAddWord = true
			},
			/**
			 * 添加测试图片
			 */
			onAddTest() {
				this.setData({
					graph: {
						w: 80,
						h: 80,
						type: 'image',
						url: "/static/assets/images/test.jpg"
					}
				});
			},


			/**
			 * 添加图片
			 */
			imgHandle(type) {
				if (type == 1) {


					let i = {
						picUrl: this.curAddImg
					}
					this.toSelect(i)
					this.showImgHandle = false
					return
				}
				uni.showLoading({
					title: '图片处理中'
				});
				this.$api.diyMatting({
					url: this.curAddImg
				}, res => {
					uni.hideLoading()
					if (res.code == 200) {
						let i = {
							picUrl: res.data
						}
						this.toSelect(i)
						this.showImgHandle = false
					}
				})
			},
			onAddImage() {


				this.$api.uploadFiles(res => {
					if (res.code == 200) {
						this.curAddImg = res.data
						this.showImgHandle = true
					}
				})
				// wx.chooseImage({
				// 	success: res => {

				// 		diyMatting
				// 		this.setData({
				// 			graph: {
				// 				w: 200,
				// 				h: 200,
				// 				type: 'image',
				// 				url: res.tempFilePaths[0]
				// 			}
				// 		});
				// 	}
				// });
			},

			/**
			 * 添加文本
			 */
			onAddText() {
				if (!this.addWord) {

					uni.showToast({
						title: '请输入文字',
						icon: 'none'
					});
					return
				}

				let font = 'hanyi'
				if (this.curFont >= 0) {
					font = this.fontAttr[this.curFont]
				}
				if (this.curCeng == -1) {
					if (this.form.local == 0) {

						this.setData({
							graph: {
								type: 'text',
								diyType: this.diyTypeList[this.form.diyType],
								color: this.fontColor,
								fontFamily: font,
								text: this.addWord
							}
						});
					} else {

						this.setData({
							graphBack: {
								type: 'text',
								diyType: this.diyTypeList[this.form.diyType],
								color: this.fontColor,
								fontFamily: font,
								text: this.addWord
							}
						});
					}
				} else {
					if (this.form.local == 0) {

						this.$refs.canvasRef.changText(this.curCeng, this.addWord)
					} else {

						this.$refs.canvasRefBack.changText(this.curCeng, this.addWord)
					}
				}
				// this.addWord = ''

				this.showAddWord = false
			},


			toImg(e) {
				if (!e) {
					return true
				}
				console.log(e);
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.$config.apiBaseUrl + "api/file/upload", //仅为示例，非真实的接口地址
						filePath: e,
						fileType: 'image',
						name: 'file',
						header: {

							'Accept': 'application/json',
							'Content-Type': 'application/x-www-form-urlencoded',
							'Authorization': this.$db.get("userToken")
						},
						formData: {
							'file': e

						},
						success: (uploadFileRes) => {

							console.log(uploadFileRes.data, 121212)
							resolve(JSON.parse(uploadFileRes.data).data)
						},
					});
				})

			},

			/**
			 * 导出图片
			 */
			onExport(type) {
				console.log(this.psdUrl, 123)

				if (!type) {
					this.showImg = true
				} else {
					uni.showLoading({
						title: '作品保存中'
					})
				}

				wx.getImageInfo({
					src: this.psdUrl,
					complete: (res) => {
						console.log(res.path, 1111)
						this.$refs.canvasRef.changeBgImage1(res.path)


						setTimeout(() => {

							this.$refs.canvasRef.exportFun().then(filePath => {
								console.log(filePath);
								this.curImg = filePath

								if (type) {
									this.onExportJSON()
								}
							}).catch(e => {
								console.error(e);
							});
						}, 50)
					}
				})

				wx.getImageInfo({
					src: this.psdBackUrl,
					complete: (res) => {
						console.log(res.path, 1111)
						this.$refs.canvasRefBack.changeBgImage1(res.path)


						setTimeout(() => {

							this.$refs.canvasRefBack.exportFun().then(filePath => {
								console.log(filePath);
								this.curImgBack = filePath

								if (type) {
									this.onExportJSON()
								}
							}).catch(e => {
								console.error(e);
							});
						}, 50)
					}
				})


			},

			onExportJSON() {
				this.toImg(this.curImg).then((res) => {


					this.toImg(this.curImgBack).then((res1) => {
						this.$nextTick(() => {
							this.$refs.canvasRef.exportJson().then(imgArr => {
								const promiseQueue = [];
								imgArr.some(item => {

									let a = this.toImg(item.url)
									promiseQueue.push(a)
								})
								Promise.all(promiseQueue).then((values) => {
									values.some((item, index) => {
										imgArr[index].url = item
									})


									let post = {
										spuId: this.prodInfo.id,
										skuId: this.curSkuId,
										picUrl: res,
										params: JSON.stringify(imgArr),
										otherParams: {}
									}
									let print = []
									let font = []
									let pendant = []
									imgArr.some((item, index) => {
										if (item.type == 'image' || item
											.type ==
											'text') {
											if (item.diyType == '平面打印') {

												let i = {
													id: this.prodInfo
														.printId
												}
												if (item.type == 'image') {
													i.pic_url = item.url
												}
												if (item.type == 'text') {
													i.name = item.text
												}
												print.push(i)
											}
											if (item.diyType == '添加挂件') {

												let i = {
													id: item.sourceId,
													name: ''
												}
												pendant.push(i)
											}
											if (item.diyType == '立体文字') {

												let i = {
													id: this.curSku.id,
													name: item.text
												}
												font.push(i)
											}
										}
									})
									post.otherParams = JSON.stringify({
										print,
										pendant,
										font
									})

									let api = 'compositionSave'
									if (this.diyInfo.id) {
										api = 'compositionUpdate'
										post.id = this.diyInfo.id
									}
									this.$api[api](post, res => {

										uni.hideLoading()
										if (res.code == 200) {
											uni.redirectTo({
												url: '/pages/diy/show?id=' +
													res.data.id
											})
										} else {

											this.$common.errorToShow(res
												.message)
										}
									})
									console.log(imgArr, 122222)
								})

							}).catch(e => {
								console.error(e);
							});
						})
					})
				})
			},
			/**
			 * 改变背景照片
			 */
			onChangeBgImage(url) {


				wx.getImageInfo({
					src: url,
					complete: (res) => {

						this.$refs.canvasRef.changeBgImage(res.path)
						this.$refs.canvasRefBack.changeBgImage(res.path)
					}
				})
			},

			onClearCanvas: function(event) {
				let _this = this;
				_this.setData({
					canvasBg: null
				});
				this.$refs.canvasRef.clearCanvas();

				this.onChangeBgImage(this.prodInfo.cxPreviewUrl)
			},

		},
	}
</script>
<style lang="scss">
	.module-canvans {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 300px;
		// background: #f5f5f5;
	}

	.bon {
		width: 100%;
		background: #70B52C;
		padding: 15rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}

	.sku-item {
		width: 33.33%;
		min-width: 33.33%;
		color: #888;
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 24rpx;

		.sku-item-content {

			border: 1px solid #f5f5f5;
			background: rgba(25, 41, 28, 0.05);
			margin: 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&.on {
			.sku-item-content {

				border: 1px solid #70B52C;
				color: #70B52C;
			}
		}
	}

	.module-action {
		.action-item {

			border-radius: 8rpx;
			border: none;
			background: rgba(25, 41, 28, 0.05);
			color: #19291C;
			padding: 40rpx 20rpx;
			width: 200rpx;
			font-size: 24rpx;
			text-align: center;
			margin: 0 15rpx;

		}
	}

	.btn-sure {

		width: 160rpx;
		text-align: center;
		background: #70B52C;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}

	.module-next {
		background: rgba(25, 41, 28, 0.05);
		border-radius: 16rpx;

		.item {
			text-align: center;
			font-size: 40rpx;

			&.on {
				color: #FE3307;
			}
		}
	}


	.page-diy {
		padding: 0 0 300rpx;
	}

	.canvanHide {
		position: fixed;
		top: -1000px;
		left: -1000px;

	}
</style>

<style lang="scss">
	.sku-item {
		width: 33.33%;
		min-width: 33.33%;
		color: #888;
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 24rpx;

		.sku-item-content {

			border: 1px solid #f5f5f5;
			background: rgba(25, 41, 28, 0.05);
			margin: 0 10rpx;
		}

		&.on {
			.sku-item-content {

				border: 1px solid #70B52C;
				color: #70B52C;
			}
		}
	}

	.module-action {
		.action-item {

			border-radius: 8rpx;
			border: none;
			background: rgba(25, 41, 28, 0.05);
			color: #19291C;
			padding: 40rpx 20rpx;
			width: 200rpx;
			font-size: 24rpx;
			text-align: center;
			margin: 0 15rpx;

		}
	}

	.btn-sure {

		width: 160rpx;
		text-align: center;
		background: #70B52C;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}

	.module-next {
		background: rgba(25, 41, 28, 0.05);
		border-radius: 16rpx;

		.item {
			text-align: center;
			font-size: 40rpx;

			&.on {
				color: #FE3307;
			}
		}
	}


	.theme-list {
		display: flex;
		text-align: center;
		overflow: auto;

		.item {
			padding: 0 30rpx 30rpx;

			&.on {
				border-bottom: 1px solid #70B52C;

				.item-img {
					border: 1px solid #70B52C;
				}
			}
		}

		.item-img {
			overflow: hidden;
			background: #F4F4F4;
		}

		.item-title {
			color: #19291C;
		}
	}


	.sku-word-item {
		border-radius: 8rpx;
		border: 1px solid #888;
		width: 200rpx;
		padding: 10rpx;
		color: #888;
		font-size: 24rpx;
		text-align: center;
		margin-top: 24rpx;
		margin-right: 24rpx;

		&.on {
			border: 1px solid #70B52C !important;
			color: #70B52C;
		}
	}
</style>